'use client'

import { JiessComponent } from '../jiessConfig';
import { $JiessDialog } from '../.jiess';
import { Button } from 'antd';

function setup() {
	let level = 1;
	const area = this.area({ title: '无限弹框示例' });
	const config = show => ({
		okType: 'primary',
		okText: '新弹出一层',
		cancelText: '关闭当前层',
		title: `当前层级【第${level++}层】`,
		onOk: () => this.dialog(config),
		onCancel() {
			// 或根据响应式关闭当前层
			show.value = false;
		},
		children: this.render({
			is: Button,
			children: '关闭所有层',
			onClick: () => {
				level = 1;
				this.dialog().closeAll();
			}
		})
	});

	area.add(
		this.render({
			is: Button,
			type: 'primary',
			children: '开启无限弹框',
			onClick: () => this.dialog(config)
		})
	).done()
}


export default function Home() {
	return (<main >
		<JiessComponent setup={
			function () {
				// 注册全局弹框
				this.add(this.render({ is: $JiessDialog }));
			}
		} />
		<JiessComponent setup={setup} />
	</main>)
}